В даному випадку, оскільки шкірка учбова, то вона матиме такі властивості:
Створення шкірки розпочинається з Ідеї. Краще всього спершу намалювати ескіз шкірки в графічному редакторові, а вже потім створювати файли, необхідні для шкірки.
Що може бути ідеєю для простої шкірки, з мінімумом наворотів? Зрозуміло, що нещодавно випущена операційна система "З універсальним інтерфейсом"!
За допомогою цього ескіза вирішувалися такі питання:
Нескладно помітити, що ескіз виглядає "недопрацьованим". Так і є. Втім, він відповів на основні питання, а більшого від нього і не вимагалося. Тому на цьому стадія "ескіз" завершена: деталі допрацьовуватимуться на ходу.
Інформація про шкірку не має особливих вимог, окрім максимальної довжини 45 символів. Просто потрібно заповнити назву шкірки, автора і (за бажанням) усе інше. В даному випадку це виглядає так:
SkinTitle=Sample SkinAuthor=Gilorn SkinVer=4.7.4 SkinWWW=http://www.light-alloy.ru/ SkinCmt=sample skin for education SkinAudio=0
Уникайте пропусків після знаку "рівно".
Три найважливіші деталі, які роблять візитку візиткою:
Оскільки наша шкірка стилізується під плитковий інтерфейс, то і візитка буде плиткою:
Починаючи з цього моменту доведеться сильно покладатися на ескіз і уяву. Адже створення малюнків для скіна оцінити неможливо: програвач не розуміє просто малюнки.
Перше питання, яке потрібно вирішити, це скільки окремих малюнків створювати. Чим більше малюнків - тим модульнішою вийде конструкція і тим простіше буде розвивати шкірку в майбутньому або використати її для створення інших шкірок. Одночасно з цим, чим більше окремих малюнків, тим більше порожнього місця на них буде і тим важчою буде шкірка.
Після ретельних роздумів було вирішено оформити окремими малюнками наступні елементи:
З ним найпростіше: у файлі буде тільки одне зображення. Усе, що вимагається - це просто перенести логотип з ескіза. Можна, правда і додати що-небудь.
Тут вже складніше, оскільки елементів декілька. Оскільки розмір усіх елементів стандартний, то можна подумати, як зручно розмістити елементи.
Чи взяти як основу зображення зі схожої по оформленню шкірки:
Між іншим, 10 значків контекстного меню являються єдиним об'єктом, тому змінювати їх порядок або кількість рядів не можна.
Зверніть увагу на фон: він червоно-рожевий. Його завдання - давати однозначну і очевидну відповідь на питання "це фон"?, а також зручно показувати межі окремих малюнків у файлі. Правила хорошого тону вимагають робити відступ між окремими малюнками в 1 піксель. Замість червоно-рожевого кольору можна було підібрати будь-який інший - це справа особистих смаків.
До речі, такий модульний підхід дозволяє копіювати частину файлу розмітки (interface.xml) із старої шкірки в нову.
Тут усе просто (масштаб 500 %)...
...як 67 цеглин. На жаль велика кількість кольорів, що настроюються, не сприяє легкому розумінню призначення кожного пікселя. І якщо в майбутньому знадобиться корекція, доведеться витрачати силу-силенну часу на визначення, який саме піксель треба змінити. Тому такий варіант має сенс лише в одному-єдиному випадку: при використанні спеціального редактора шкірок.
Найбільш розумний варіант - використовувати для кожного кольору не один піксель, а піксель з ілюстрацією. Звичайно, створення такої системи займе не одну годину, але в результаті з'явиться незрівнянно зручніший і наочніший механізм вибору кольорів. Наприклад, як цей (масштаб 200 %):
Тут кожен колір представлений шаром-заливкою "колір" з графічною маскою (інструментарій Photoshop). Усі кольори зручно згруповані по теках. В результаті вже на етапі первинного підбору кольорів видно, як він виглядатиме. Крім того, кожен шар має зрозуміле ім'я, так що потрібний шар відшукується дуже швидко. Для зміни кольору тут потрібний лише подвійний клік на відповідному шарі.
У основний файл малюнка піде усе, що не потрапило в попередні три, а саме:
Оскільки подальшого розвитку шкірки не буде, усе можна зробити красиво:
На перший погляд усе компактно, але навіть в цій шкірці є багато вільного місця. Просто воно не червоне, а сіре.
Уважно придивіться до самої нижньої сірої області. Цифри і елементи гучності і шкали часу розташовані в тому ж порядку, в якому вони розташовуватимуться на шкірці. Більше того, графічні константи кожного елементу розташовані відносно інших, що відносяться до того ж контролу у візуальному порядку. Це усе дозволить в майбутньому розуміти що означає кожний з елементів. А розмітка допоможе на наступному кроці визначити межі кожної графічної константи.
Крім того, можна помітити, що малюнок, що зображує ще незаповнену гучність (сірий квадрат ліворуч внизу), недомальований справа на 1 піксель. Це треба, щоб візуально приховати "недоїзд" бігунка на той самий 1 піксель. Адже як відомо, бігунок їздить з розрахунку, що в нім 10 пікселів (а не 9, як в цій шкірці).
Придивіться до графічного шрифту. Він розпочинається з символу "<". Цей символ малюється перед позицією, якщо користувач включає зворотній відлік часу. Якщо зображувати цей символ як мінус, то вийде набагато зрозуміліше вираження (як, наприклад, в шкірках Alter Ego, Dub, PK - 69 і більшості інших).
Останнє, на що слід звернути увагу, це анімація кнопок з фіксацією. Реакція програвача відбувається не на натискання кнопки, а на її подальший відпуск - віджимання, якщо завгодно. Це веде до наступних результатів:
Ось чому потрібно використати зміну зображення кнопки не з нижнього лівого малюнка, а з правого верхнього. Це недавня рекомендація, тому є деяка кількість шкірок, які її не дотримуються (просто вони з'явилися до появи рекомендації).
Це найважливіша частина роботи із створення шкірки, яку добре б перевіряти наживо (тобто приміряти недоскін на програвач). Насамперед, треба створити заготовку: розмістити блоки коду в зручному порядку (пам'ятаємо про кодування UTF-8 with signature):
<?xml version="1.0"?> <SKIN> <!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок вікна --> <IMAGE id="HD" file="main.bmp"> </IMAGE> <!-- Панель керування --> <IMAGE id="FT" file="main.bmp"> </IMAGE> <!-- Список відтворення --> <IMAGE id="PL" file="main.bmp"> </IMAGE> <!-- Набори кольорів --> <IMAGE id="Color" file="Color.bmp"> </IMAGE> <!-- Контекстне меню --> <IMAGE id="Menu" file="Rclick.bmp"> </IMAGE> <!-- Іконки мишки в хінтах --> <IMAGE id="Hint" file="main.bmp"> </IMAGE> <!-- Розпізнавання чисел по чергуванню різних кольорів внизу блоку --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Кінець розмітки основних малюнків на фрагменти // =================== --> <!-- Початок опису застосування створених раніше фрагментів малюнка ======== --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Опис бордюру програми --> <!-- Розташовуємо кнопки заголовка вікна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задній план заголовка --> </CTLDEF> <!-- Розташовуємо кнопки Панелі керування --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задній план панелі керування --> </CTLDEF> <!-- Розташовуємо кнопки Списку відтворення --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задній план кнопок --> </CTLDEF> </SKIN>
Зелений текст - це коментарі. Вони допомагають орієнтуватися в тексті, але при цьому ігноруються програмою.
Кожна константа має унікальне ім'я, положення і розмір. Якщо ім'я можна узяти з довідника, то положення з розміром доведеться визначати самостійно. Робиться це за допомогою графічного редактора.
Переважна більшість графічних редакторів відображають координати курсора і мають інструмент "виділення прямокутної області" з вказівкою розмірів виділеної області.
Для цілей розмітки просто ідеально підійде PhotoFiltre (безкоштовна для некомерційного використання, офіційний сайт, портативна версія). Вона при виділенні дозволяє відразу дізнатися і позицію і розмір. Причому розмір виділення можна на місці поправити мишкою:
Таким чином визначення усіх значень відбувається в чотири етапи:
В результаті 15-и хвилин зусиль, перша частина файлу розмітки набуває наступного вигляду:
<!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок вікна --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Бордюри вікна --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Задній план заголовка--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Задній план під текстом--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [про програму] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [закрити] --> </IMAGE> <!-- Панель керування --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Задній план основної панелі керування --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Грати/пауза] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Налаштування] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Комплект цифр "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Шкала часу вже заповнена --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- бігунок по шкалі, вирівнювання по низу --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Шкала часу ще порожня --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- штрихи на шкалі основні--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- штрихи на шкалі проміжні--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Регулятор звуку вже повний --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Регулятор звуку бігунок--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Регулятор звуку ще порожній --> </IMAGE> <!-- Список відтворення --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- задній план кнопок --> </IMAGE> <!-- Набори кольорів --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--вказуємо кольори тексту в заголовку вікна --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--вказуємо кольори OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--вказуємо кольори автопромотки --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--вказуємо кольори хінтів --> <AREA id="PL" pos="1,18" size="1,12"/> <!--вказуємо кольори списку --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--вказуємо кольори контекстного меню --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--вказуємо кольори повноекранного завантаження файлів --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--вказуємо кольори повноекранного завантаження субтитрів --> </IMAGE> <!-- Контекстне меню --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- малюнок для колонки іконок в контекстному меню --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- значки для елементів контекстного меню --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- маркер відміченого пункту меню --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- закладка в списку --> </IMAGE> <!-- Іконки мишки в хінтах --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Малюнок ЛКМ --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Малюнок ПКМ --> </IMAGE>
Загалом і в цілому тут є тільки один підводний камінь: не усі знають, що таке "<" і ">" і чим вони відрізняються. Тому в коментарі краще вказати, що маємо на увазі зрозумілішою мовою:
<!-- Розпізнавання цифр по чергуванню різних кольорів внизу блоку --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" -->
Це фінальний етап створення шкірки. І його бажано візуально контролювати.
Є декілька приміток, які необхідно зробити:
У примітках це може виглядати складно, але якщо подивитися їх на живій шкурі, стане зрозуміліше.
Від чого залежать позиція і розмір контролів? Розмір - тільки від того, яке зображення було намальоване (окрім панелей і смуг прокрутки гучності і шкали часу - вони "тягнуться"). Позиція не залежить ні від чого. Вона визначається лише задумкою автора.
<CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Опис бордюру програми --> <!-- Розташовуємо кнопки заголовка вікна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задній план заголовка --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [про програму] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [закрити] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Текстовий рядок заголовка --> </CTLDEF> <!-- Розташовуємо кнопки Панелі керування --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задній план панелі керування --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Грати/пауза] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Налаштування] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Позиція/Тривалість --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Поточний час --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Регулятор гучності --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Шкала часу --> </CTLDEF> <!-- Розташовуємо кнопки Списку відтворення --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задній план кнопок --> </CTLDEF>
Після того, як усі елементи отримують свою позицію і розмір, шкірку потрібно подивитися на предмет проблем, негарних рішень і недоробок. Якщо, що - поправити позицію контролів.
Нарешті, файл розмітки набуває свого остаточного вигляду:
<?xml version="1.0"?> <SKIN> <!-- Логотип --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Логотип --> </IMAGE> <!-- Заголовок вікна --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Бордюри вікна --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Задній план заголовка--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Задній план під текстом--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [про програму] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [закрити] --> </IMAGE> <!-- Панель керування --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Задній план основної панелі керування --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Грати/пауза] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Налаштування] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Комплект цифр "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Шкала часу вже заповнена --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- бігунок по шкалі, вирівнювання по низу --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Шкала часу ще порожня --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- штрихи на шкалі основні--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- штрихи на шкалі проміжні--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Регулятор звуку вже повний --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Регулятор звуку бігунок--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Регулятор звуку ще порожній --> </IMAGE> <!-- Список відтворення --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- задній план кнопок --> </IMAGE> <!-- Набори кольорів --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--вказуємо кольори тексту в заголовку вікна --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--вказуємо кольори OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--вказуємо кольори автопромотки --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--вказуємо кольори хінтів --> <AREA id="PL" pos="1,18" size="1,12"/> <!--вказуємо кольори списку --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--вказуємо кольори контекстного меню --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--вказуємо кольори повноекранного завантаження файлів --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--вказуємо кольори повноекранного завантаження субтитрів --> </IMAGE> <!-- Контекстне меню --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- малюнок для колонки іконок в контекстному меню --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- значки для елементів контекстного меню --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- маркер відміченого пункту меню --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- закладка в списку --> </IMAGE> <!-- Іконки мишки в хінтах --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Малюнок ЛКМ --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Малюнок ПКМ --> </IMAGE> <!-- Розпізнавання цифр по чергуванню різних кольорів внизу блоку --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Кінець розмітки основних малюнків на фрагменти // ==================================== --> <!-- Початок опису застосування створених раніше фрагментів малюнка ========================= --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Опис бордюру програми --> <!-- Розташовуємо кнопки заголовка вікна --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Задній план заголовка --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [про програму] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [закрити] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Текстовий рядок заголовка --> </CTLDEF> <!-- Розташовуємо кнопки Панелі керування --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Задній план панелі керування --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Грати/пауза] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Налаштування] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Позиція/Тривалість --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Поточний час --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Регулятор гучності --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Шкала часу --> </CTLDEF> <!-- Розташовуємо кнопки Списку відтворення --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- задній план кнопок --> </CTLDEF> </SKIN>
На даний момент шкіркою вже можна користуватися але все ще незручно передавати. Тепер її треба оптимізувати і упакувати.
Оптимізація полягає в зміні графічних файлів.
Як відомо, формат "bmp" дуже марнотратно витрачає місце, оскільки він не має вбудованих можливостей до стискування. Але не усе так погано. Натомість можна зіграти на глибині кольору. Малюнок формату "bmp" підтримує такі варіанти глибини кольору:
Кількість кольорів в малюнках нашої шкірки наступна:
Як видно, 2 зображення можна стиснути до 8-бітової глибини кольору, а одне - навіть до 4-бітової. Щоб в новому зображенні збереглися потрібні кольори, їх потрібно проіндексувати. Як це зробити, залежить від графічного редактора. Наприклад, в Photoshop треба перейти в головне меню \ Зображення \ Режим \ Індексовані кольори.... В результаті перевірки виявилось, що для Rclick.bmp стискування до 256-и кольорів візуально непомітне. Тому Буде проведено зміну глибини кольору для усіх зображень:
Файл | Старий розмір, KiB | Нова глибина кольору | Новий розмір, KiB |
---|---|---|---|
logo.bmp | 85,1 | 8 біт | 29,4 |
Color.bmp | 71,1 | 8 біт | 23,8 |
Rclick.bmp | 12,3 | 8 біт | 4,0 |
main.bmp | 91,9 | 4 біт | 15,7 |
ВСЬОГО | 260,4 | - | 72,9 |
Як виявилося загальний об'єм малюнків зменшився більше, ніж в три рази. Вражає! Аналогічним чином треба поступити з файлом "preview.png" Єдина різниця, що формат "png" не має 4-бітової глибини кольору, а тільки повну (16,8 млн. кольорів) або 8-бітову (256 кольорів).
Усе досить просто: беруться усі потрібні файли і архівуються у формат "zip". Рівень стискування - будь-який, але рекомендується максимальний. Налаштування стискування краще залишити за умовчанням, оскільки Light Alloy не розуміє сучасні методи стискування типу LZMA.
Нарешті, фінальний штрих: у шкірки необхідно поміняти розширення. Був ".zip" - став ".las".
Нарешті, після одного-двох днів праці, шкірка готова!